<template>
  <div class="roles">
  
   <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
     
          <el-button type="primary" @click="dialogVisible=true" > 添加</el-button>

 <el-dialog
  title="添加"
  :visible.sync="dialogVisible"
  width="40%">
  <el-form ref="forms" :model="form"  label-width="20px">
   <el-form-item  >
    <el-input placeholder="请输入内容" v-model="form.roleName">
      <template slot="prepend">用户</template>
    </el-input>
   </el-form-item>
    <el-form-item  >
    <el-input placeholder="请输入内容" v-model="form.roleDesc">
      <template slot="prepend">密码</template>
    </el-input>
    </el-form-item>
  </el-form>
   
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible=true">取 消</el-button>
    <el-button type="primary" @click="submitForm('forms')">确 定</el-button>
  </span>
</el-dialog>


      

      <el-table
      border
    :data="list"
    stripe>
      <el-table-column
     type="expand"
     
      >
       <template slot-scope="scope">
          <el-row :class="['buttonb',index===0?'topb':'']" :gutter="20" v-for="(itm,index) in scope.row.children" :key="itm.id" >
        <el-col :span='5'>
          <el-tag closable @close="removes(scope.row,itm.id)">
        {{itm.authName}}
         </el-tag>
         <i class="el-icon-caret-right"></i>
        </el-col>
        <!-- 2级权限 -->
        <el-col :span='19'>
          <el-row :class="['topb',i===0?'topbs':'']" v-for="(itms,i) in itm.children" :key="itms.id" >
            <el-col :span='8'>
              <el-tag type="success" closable @close="removes(scope.row,itms.id)">
              {{itm.authName}}
               </el-tag>
                <i class="el-icon-caret-right"></i>
            </el-col>
            <el-col :span='11'>
              <el-row  >
                <el-col>
                   <el-tag  v-for="itmss, in itms.children" :key="itmss.id" type="danger" closable @close="removes(scope.row,itmss.id)">
              {{itm.authName}}
               </el-tag>
                <i class="el-icon-caret-right"></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
       
     </el-row>

         <pre>
        {{ scope.row}}
         </pre>
         </template>
     
    </el-table-column>
     <el-table-column
     type="index"
      label="#"
      >
    </el-table-column>
    <el-table-column
      prop="roleName"
      label="角色名称"
      >
    </el-table-column>
    <el-table-column
      prop="roleDesc"
      label="角色描述"
     >
    </el-table-column>
    <el-table-column
      prop="level"
      label="操作"
      width="480"
      >
       <template slot-scope="scope">
   
 <el-button type="primary" icon="el-icon-edit" size="mini" @click="sure(scope.row.id)">编辑</el-button>
 <!-- 编辑 -->
  <el-dialog
  title="编辑"
  :visible.sync="edil"
  width="40%">
 <el-form ref="forms" :model="form"  label-width="20px">
   <el-form-item  >
    <el-input placeholder="请输入内容" v-model="form.roleName">
      <template slot="prepend">用户</template>
    </el-input>
   </el-form-item>
    <el-form-item  >
    <el-input placeholder="请输入内容" v-model="form.roleDesc">
      <template slot="prepend">密码</template>
    </el-input>
    </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="edil=false">取 消</el-button>
    <el-button type="primary"  @click="sures">确 定</el-button>
  </span>
</el-dialog>
 
 <el-button type="danger" icon="el-icon-delete-solid" size="mini" @click="remove(scope.row.id)"> 删除</el-button>


 


 <el-button type="warning" icon="el-icon-document" size="mini" @click="chaxu(scope.row)">分配权限</el-button>
 <!-- 分配权限 -->
 <el-dialog
 @close="clear"
  title="分配权限"
  :visible.sync="dig"
  width="40%">
 <el-tree :data="right" :props="defaultProps" show-checkbox
   node-key="id"
 default-expand-all
 :default-checked-keys="kesy"
 lazy
 ref="trees"
 >
 </el-tree>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dig=false">取 消</el-button>
    <el-button type="primary"  @click="digg">确 定</el-button>
  </span>
</el-dialog>

      </template>
    </el-table-column>
  </el-table>
   </el-card>



  </div>
</template>
<script>

  
export default {
name:'Roles',
  data() {
    return{
      list:[],
      form:{
          roleName: '',
         roleDesc: ''
      },
      edil:false,
      kesy:[],
       defaultProps: {
          children: 'children',
          label: 'authName'
        },
      dialogVisible:false,
      dig:false,
      right:[],
      idd:'',
      fid:""
    }
  },
  components:{
   
  },
  created(){
  this.getlist()
  },
  methods:{
    clear(){
this.kesy=[]
    },
    sure(id){
     this.edil=true
     this.idd=id
     console.log(id);
     return id
    },
   async sures(){
  
 
   
    if (this.form.roleName===''&&this.form.roleDesc==='') {
       this.$message.error('内容为空')
      return
    }else{
       const {data:res}=await this.$http.put("roles/"+this.idd,this.form)
       if (res.meta.status!==200) {
      this.$message.error('添加失败')
    }
     this.$message.success('添加成功')
     this.getlist()
     
    }
    
  
  this.edil=false
    },
     async getlist(){
     const{data:res} =await this.$http.get('roles')
    
     this.list=res.data

    },
   async digg(){
   
   const arr=[
...this.$refs.trees.getCheckedKeys(),
...this.$refs.trees.getHalfCheckedKeys()
   ]
   const arrs=arr.join(',')
   console.log(arrs);
   const {data:res}=await this.$http.post(`roles/${this.fid}/rights`,{rids:arrs})
   console.log(res);
   this.getlist()
   
     this.dig=false
    },
    // 分配权限事件
     chaxu(row){
    this.fid=row.id
     this.$http.get('rights/tree').then(res=>{
      console.log(res.data.data, 'row==',row);
       this.right=res.data.data
          this.gitdigui(row,this.kesy)
         
     })
     this.dig=true;
  },
    // 递归函数
    gitdigui(rous,arr){
       if (!rous.children) {
        return arr.push(rous.id)
       }
       rous.children.forEach(i => this.gitdigui(i,arr)
       );
    },
   removes(row,rid){
    
   this.$http.delete(`roles/${row.id}/rights/${rid}`).then(res=>{
      this.$message({
            type: 'success',
            message: '删除成功!'
          });
        
  row.children=res.data.data
 })
  },
  remove(id){
  
 this.$http.delete(`roles/${id}`).then(res=>{
    this.$message({
            type: 'success',
            message: '删除成功!'
          });
  this.getlist()
 })
  },
 
  submitForm(fo){
    this.dialogVisible=false
    this.$refs[fo].resetFields();
    this.$http.post('roles',this.form).then(res=>{
      this.getlist()
    })
  
  }
  },
  
}
</script>


<style lang="less" scoped>
.el-card{
margin-top: 30px;

}
/deep/.el-card__body{
line-height: 20px; 
text-align: left;
}
// .el-row{
//   height: 40px;
// }

.topb{
  border-top: 1px solid #000;
}
.topbs{
  border-top: 0;
}
.buttonb{
  border-bottom: 1px solid #000;}
.el-tag{
  margin-left: 27px;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
